<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(abc,idx) in list" :key="abc.id">
                {{ idx }} - {{ abc.name }} - {{ abc.age }}
            </li>
        </ul>
        <ul>
            <li v-for="(item,i) in menuList" :key="i">
                <span v-text="item.title"></span>
                <ul>
                    <li v-for="val in item.items" :key="val" v-text="val"></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
<script src="./libs/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                list:[{
                    id:1,
                    name:"张三",
                    age:19
                },{
                    id:2,
                    name:"李四",
                    age:20,
                },{
                    id:3,
                    name:"王二",
                    age:16
                },{
                    id:4,
                    name:"赵五",
                    age:24
                },{
                    id:5,
                    name:"钱六",
                    age:14
                }],
                menuList:[{
                    title:"大菜",
                    items:["红烧肉","糖醋排骨","麻辣鱼头"]
                },{
                    title:"小菜",
                    items:["酸辣土豆丝","干煸豆角","地三鲜"]
                },{
                    title:"凉菜",
                    items:["花生米","拌黄瓜","皮蛋豆腐"]
                }]
            }
        },
    })
</script>
</html>